

<template>
  <div id="jkgl2">


    <div class="">
      <div class="aaa">
        <h1>
          基本信息
        </h1>
        <el-form :model="ruleForm" ref="ruleForm" label-width="80px" class="demo-ruleForm" inline >
          <el-form-item label="名称:" prop="name" >
            <el-input v-model="ruleForm.name" placeholder="请输入" label-width="80px"></el-input>
          </el-form-item>

          <el-form-item label="性别">
            <el-select v-model="ruleForm.sex" placeholder="全部" clearable>
              <el-option label="男" value="男"></el-option>
              <el-option label="女" value="女"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="日期:" prop="date">
            <el-date-picker type="date" value-format="yyyy-MM-dd" placeholder="选择日期" v-model="ruleForm.date" style="width: 100%;"></el-date-picker>
          </el-form-item>

          <el-form-item label="籍贯:" prop="jg">
            <el-cascader
                size="large"
                :options="pcaTextArr"
                v-model="ruleForm.jg">
            </el-cascader>
          </el-form-item>


          <el-form-item label="证件号码:" prop="zjhm">
            <el-input v-model="ruleForm.zjhm" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="民族">
            <el-select v-model="ruleForm.mz" placeholder="全部" clearable>
              <el-option label="汉族" value="汉族"></el-option>
              <el-option label="回族" value="回族"></el-option>
              <!--              <el-option label="。。。" value="。。。"></el-option>-->
            </el-select>
          </el-form-item>


          <el-form-item label="联系电话:" prop="lxdh">
            <el-input v-model="ruleForm.lxhm" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="爱好特长:" prop="tc">
            <el-input v-model="ruleForm.tc" placeholder="请输入"></el-input>
          </el-form-item>

          <el-form-item label="健康状况:" prop="status">
            <el-input v-model="ruleForm.status" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="通讯地址:" prop="dz">
            <el-input v-model="ruleForm.dz" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="绑定设备">
            <el-select v-model="ruleForm.wid">
              <el-option v-for="s in sbList" :label="s.name" :value="s.id"></el-option>
            </el-select>
          </el-form-item>
          <div class="bbb">
            <el-upload
                class="avatar-uploader"
                action="http://localhost:9010/fw/tp"
                name="file"
                v-model="ruleForm.photo"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
              <img width="50px" v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
        </el-form>

      </div>

    </div>
    <div>
      <h1>现病史</h1><br>
      <el-checkbox-group v-model="xbs">
        <el-checkbox-button label="高血压"></el-checkbox-button>
        <el-checkbox-button label="脑血管意外"></el-checkbox-button>
        <el-checkbox-button label="心肌梗死"></el-checkbox-button>
        <el-checkbox-button label="癫痫"></el-checkbox-button>
        <el-checkbox-button label="肺气肿"></el-checkbox-button>
        <el-checkbox-button label="慢性消化系统"></el-checkbox-button>
        <el-checkbox-button label="听力受损"></el-checkbox-button>
        <el-checkbox-button label="失聪"></el-checkbox-button>
      </el-checkbox-group>
    </div>
    <div>
      <h1>过往病史</h1><br>
      <el-checkbox-group v-model="qbx">
        <el-checkbox-button label="高血压"></el-checkbox-button>
        <el-checkbox-button label="脑血管意外"></el-checkbox-button>
        <el-checkbox-button label="心肌梗死"></el-checkbox-button>
        <el-checkbox-button label="癫痫"></el-checkbox-button>
        <el-checkbox-button label="肺气肿"></el-checkbox-button>
        <el-checkbox-button label="慢性消化系统"></el-checkbox-button>
        <el-checkbox-button label="听力受损"></el-checkbox-button>
        <el-checkbox-button label="失聪"></el-checkbox-button>
      </el-checkbox-group>
    </div>



    <div>
      <h1>其他疾病</h1>
      <textarea v-model="ruleForm.qtjb" placeholder="请输入"></textarea>
    </div>

    <div id="app">
      <h1>家属信息</h1>
      <el-table
          :data="tableData"
          border
          style="width: 100%">
        <el-table-column
            prop="id"
            label="遍号"
        >
        </el-table-column>

        <el-table-column
            prop="name"
            label="名称"
        >
        </el-table-column>

        <el-table-column
            prop="gid"
            label="关系">
          <template slot-scope="scope">
            {{scope.row.gid=='1'?'父亲':scope.row.gid=='2'?'母亲':scope.row.gid=='3'?'儿子':scope.row.gid=='4'?'女儿':scope.row.gid=='5'?'兄弟':scope.row.gid=='6'?'姐妹':'其他'}}
          </template>
        </el-table-column>

        <el-table-column
            prop="dh"
            label="联系电话"
        >
        </el-table-column>

        <el-table-column
            prop="ddz"
            label="联系地址"
        >
        </el-table-column>

        <el-table-column
            prop="jjlx"
            label="紧急联系人"
        >
        </el-table-column>



        <el-table-column
            label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="del(scope.row.id)" size="mini">删除</el-button>
            <el-button type="primary" @click="toAdd()">添加</el-button>
          </template>
        </el-table-column>

      </el-table>
      <el-pagination
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[2, 4, 6, 8]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>

      <el-dialog
          title="添加"
          :visible.sync="dialogVisible"
          width="30%">

        <el-form :model="ruleForm1" ref="ruleForm1" label-width="100px" class="demo-ruleForm">

          <el-form-item label="名称:" prop="name">
            <el-input v-model="ruleForm1.name" placeholder="请输入"></el-input>
          </el-form-item>

          <el-form-item label="关系">
            <el-select v-model="ruleForm1.gid" >
              <el-option v-for="g in gxiList" :label="g.name" :value="g.id"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="联系电话:" prop="dh">
            <el-input v-model="ruleForm1.dh" placeholder="请输入"></el-input>
          </el-form-item>

          <el-form-item label="联系地址:" prop="ddz">
            <el-input v-model="ruleForm1.ddz" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="add1('ruleForm1')" v-text="ruleForm1.id==null?'添加':'修改'"></el-button>
            <el-button @click="resetForm('ruleForm1')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>





    </div>




    <div>
      <el-button type="primary" @click="add('ruleForm')" v-text="ruleForm.id==null?'添加':'修改'"></el-button>
      <el-button type="info" @click="$router.push({path:'/jkgl'})" plain>返回</el-button>
    </div>
  </div>
</template>

<style >
.ab{
  width: 100%;
  height: 60%;
}
.aaa{
  width: 90%;
}
.bbb{

  float: right;
  //margin-bottom: 50px;
  top:0px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<script >
import {
  provinceAndCityData,
  pcTextArr,
  regionData,
  pcaTextArr,
  codeToText,
} from "element-china-area-data";
export default {
  data() {
    return {
      xbs: [],
      qbx: [],
      tableData: [],
      pageNum: 1,
      pageSize: 2,
      total: 0,
      formInline: {},
      gxiList: [],
      sbList: [],
      dialogVisible: false,
      dialogVisible2: false,
      ruleForm: {},
      ruleForm1: {},
      imageUrl: "",
      pcaTextArr
    }
  },
  methods: {
    lx() {
      this.axios.get(`http://localhost:9010/fw/sbList`).then(res => {
        this.sbList = res.data.data;
      })
    },


    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },

    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.ruleForm.photo = res;
    },
    toAdd() {
      this.ruleForm1 = {};
      this.dialogVisible = true;
    },
    add1(formName) { //添加方法
      this.$refs[formName].validate((valid) => {
        if (valid) {//满足校验
          //通过ajax把数据保存到后端
          this.axios.post(`http://localhost:9010/ffw/add1`, this.ruleForm1).then(res => {
            if (res.data.code == 200) {
              this.$message.success("添加成功");
            } else {
              this.$message.error("添加失败");
            }
            this.findPage1();
            this.dialogVisible = false;
          })
        } else {//不满足校验
          console.log('error submit!!');
          return false;
        }
      });
    },


    gx() {
      this.axios.get(`http://localhost:9010/ffw/gxList`).then(res => {
        this.gxiList = res.data.data;
      })
    },

    add(formName) { //添加方法
      this.$refs[formName].validate((valid) => {
        if (valid) {//满足校验
          //通过ajax把数据保存到后端
          this.ruleForm.xbs = this.xbs.toString();
          this.ruleForm.qbx = this.qbx.toString();
          this.ruleForm.jg = this.ruleForm.jg.toString();
          this.axios.post(`http://localhost:9010/fw/add`, this.ruleForm).then(res => {
            if (res.data.code == 200) {
              this.$message.success("添加成功");
            } else {
              this.$message.error("添加失败");
            }
            this.$router.push({path: '/jkgl'})
          })
        } else {//不满足校验
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) { //重置按钮点击可以重置
      this.$refs[formName].resetFields();
    },
    toUpdate() { //修改回显数据方法
      var id = this.$route.query.id;//获取浏览器地址栏传递过来的id
      this.axios.get(`http://localhost:9010/fw/toUpdate?id=${id}`).then(res => {
        this.ruleForm = res.data.data;
        this.xbs = res.data.data.xbs.split(",");
        this.qbx = res.data.data.qbx.split(",");
        this.ruleForm.jg = res.data.data.jg.split(",");
        this.imageUrl = res.data.data.photo;
      })
    },


    findPage1() { //查询所有加分页参数
      this.axios.post(`http://localhost:9010/ffw/findPage1?pageNum=${this.pageNum}&pageSize=${this.pageSize}`, this.formInline).then(res => {
        this.tableData = res.data.data.records;
        this.total = res.data.data.total;
        if (this.pageNum>res.data.data.pages){
          this.pageNum=res.data.data.pages;
          this.findPage();
        }
      })
    },
    handleCurrentChange(val) {//分页方法
      this.pageNum = val;
      this.findPage1();
    },


  },
  created() {
    this.findPage1();
    this.gx();
    this.lx();
    if (this.$route.query.id) {
      this.toUpdate();
    } else {
      this.ruleForm = {};
    }


  }
}
</script>
